<template>
	<view>
		<view class="carousel">
			<image :src="data.pic" mode="aspectFit"></image>
		</view>
		<view class="introduce-section">
			<view class="title-box">
				<view>
					<text class="title">{{data.name || '商标'}}</text>
				</view>
				<view>
					<view class="bigcate">{{data.cate}}类</view>
				</view>
			</view>
			<view class="bot-row">
				<text>{{trademarkStatus[data.status]}}</text>
			</view>
		</view>
		<view class="c-list">
			<view class="c-row b-b">
				<text class="tit">注 册 号</text>
				<text class="con t-r" @click="copyData(data.applyNo)">{{data.applyNo}}</text>
			</view>
			<view class="c-row b-b">
				<text class="tit">使用期限</text>
				<text class="con t-r">{{data.startDate}} —— {{data.endDate}}</text>
			</view>
			<view class="c-row b-b">
				<text class="tit">类 似 群</text>
				<text class="con t-r" style="word-wrap: break-all;word-break: break-all;white-space: pre-wrap;">{{data.group}}</text>
			</view>
			<view class="c-row b-b">
				<text class="tit">商品/服务</text>
				<text class="con t-r" style="word-wrap: break-all;word-break: break-all;white-space: pre-wrap;">{{data.goods}}</text>
			</view>
			<view class="c-row b-b">
				<text class="tit">申 请 人</text>
				<text v-if="!isLogin" @click="showLogin=true" class="more-btn">点击查看</text>
				<text v-else class="con t-r">{{data.applicant_text}}</text>
			</view>
			<view class="c-row b-b">
				<text class="tit">申请日期</text>
				<text class="con t-r">{{data.applyDate}}</text>
			</view>
			<view class="c-row b-b">
				<text class="tit">初申日期</text>
				<text class="con t-r">{{data.reviewDate}}</text>
			</view>
			<view class="c-row b-b">
				<text class="tit">初申公告</text>
				<text class="con t-r">{{data.reviewNo}}</text>
			</view>
			<view class="c-row b-b">
				<text class="tit">注册日期</text>
				<text class="con t-r">{{data.registDate}}</text>
			</view>
			<view class="c-row b-b">
				<text class="tit">注册公告</text>
				<text class="con t-r">{{data.registNo}}</text>
			</view>
			<view class="c-row b-b">
				<text class="tit">代理公司</text>
				<text v-if="!isLogin" @click="showLogin=true" class="more-btn">点击查看</text>
				<text v-else class="con t-r">{{data.agency_text}}</text>
			</view>
		</view>
		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<view @click="$goto('/pages/tabBar1')" class="p-b-btn">
				<text class="icon zhuye1"></text>
				<text>首页</text>
			</view>
			<view class="p-b-btn" :class="{active: monitor}" @click="doMonitor">
				<text class="icon shexiangtou"></text>
				<text>监控</text>
			</view>
			<view class="action-btn-group">
				<button type="primary" @click="doShare" class="action-btn no-border">分享</button>
				<button type="primary" @click="postOrder()" class="action-btn no-border">委托购买</button>
			</view>
		</view>
		<Share v-if="showShare" @close="showShare=false"></Share>
		<Login v-if="showLogin"></Login>
		<view class="alert" v-if="showPostForm">
			<view class="main">
				<view class="icon bianji"></view>
				<view style="margin-top: 60upx;"></view>
				<PostForm :form_id="trademarkConfig.buy_form_id" @close="showPostForm=false" :button="true" @onFormSubmit="showPostForm=false;postOrder($event)"></PostForm>
			</view>
		</view>
	</view>
</template>

<script>
	import Share from "@/components/share"
	import Login from "@/components/login"
	import PostForm from "@/components/postForm"
	export default{
		components: {
			Share,
			Login,
			PostForm
		},
		data() {
			return {
				trademarkStatus : getApp().globalData.trademarkStatus,
				trademarkConfig : getApp().globalData.trademarkConfig,
				applyNo : '',
				data : {},
				isLogin : false,
				monitor: false,
				showShare : false,
				showLogin : false,
				showPostForm : false
			}
		},
		onLoad(options){
			let that = this
			uni.showShareMenu()
			this.applyNo = options.applyNo
			this.loadData()
			uni.$once('loginClick',function(){
				that.showLogin = true
			})
			if(uni.getStorageSync('token')){
				this.isLogin = true
				this.showLogin = false
			}
		},
		methods:{
			async loadData(){
				this.data = await this.$api('GET','trademark/'+this.applyNo)
			},
			async postOrder(data){
				if(this.isLogin){
					if(this.trademarkConfig.buy_form_id > 0){
						if(data){
							await this.$api('POST','formOrder',{form_id:this.trademarkConfig.buy_form_id,form:data})
						}else{
							this.showPostForm = true
						}
					}else{
						uni.showToast({
							title: '未设置',
							icon: 'none',
							duration: 2000
						})
					}
				}else{
					this.showLogin = true
				}
			},
			doShare(){
				if(this.isLogin){
					this.showShare = !this.showShare
				}else{
					this.showLogin = true
				}
			},
			async doMonitor(){
				
			}
		}
	}
</script>

<style lang='scss'>
	.carousel {
		width: 100%;
		height: 380upx;
		background: #fff;
		position:relative;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.introduce-section{
		background: #fff;
		padding: 20upx 30upx;
		.title-box{
			display:flex;
			justify-content:space-between;
			align-items:baseline;
			height: 64upx;
			padding: 10upx 0;
			font-size: 26upx;
			color:$uni-color-primary;
			.title{
				font-size: $font-lg + 2upx;
				letter-spacing: 0;
				display: -webkit-box;
				overflow: hidden;
				text-overflow: ellipsis;
				word-wrap: break-word;
				white-space: normal!important;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
		.bot-row{
			display:flex;
			align-items:center;
			height: 50upx;
			font-size: $font-sm;
			color: $font-color-light;
			text{
				flex: 1;
			}
		}
	}
	.c-list{
		font-size: $font-sm + 2upx;
		color: $font-color-base;
		background: #fff;
		padding-bottom: 150rpx;
		.c-row{
			display:flex;
			align-items:center;
			padding: 20upx 30upx;
			position:relative;
		}
		.tit{
			width: 140upx;
		}
		.con{
			flex: 1;
			color: $font-color-dark;
			.selected-text{
				margin-right: 10upx;
			}
		}
		.bz-list{
			height: 40upx;
			font-size: $font-sm+2upx;
			color: $font-color-dark;
			text{
				display: inline-block;
				margin-right: 30upx;
			}
		}
		.con-list{
			flex: 1;
			display:flex;
			flex-direction: column;
			color: $font-color-dark;
			line-height: 40upx;
		}
		.red{
			color: $uni-color-primary;
		}
		.more-btn{
			color: $uni-color-primary;
		}
	}
	/* 底部操作菜单 */
	.page-bottom{
		position:fixed;
		left: 2%;
		bottom:20upx;
		z-index: 5;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 96%;
		height: 100upx;
		background: rgba(255,255,255,.9);
		box-shadow: 0 0 20upx 0 rgba(0,0,0,.5);
		border-radius: 16upx;
		
		.p-b-btn{
			display:flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-sm;
			color: $font-color-base;
			width: 96upx;
			height: 80upx;
			.icon{
				font-size: 40upx;
				line-height: 48upx;
				color: $font-color-light;
			}
			&.active, &.active .icon{
				color: #ff7575;
			}
			.love{
				font-size: 46upx;
			}
		}
		.action-btn-group{
			display: flex;
			height: 76upx;
			border-radius: 100px;
			overflow: hidden;
			box-shadow: 0 20upx 40upx -16upx #fa436a;
			box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
			background: linear-gradient(to right, $uni-color-primary,#00BB00,#01814A);
			margin-left: 20upx;
			position:relative;
			&:after{
				content: '';
				position:absolute;
				top: 50%;
				right: 50%;
				transform: translateY(-50%);
				height: 28upx;
				width: 0;
				border-right: 1px solid rgba(255,255,255,.5);
			}
			.action-btn{
				display:flex;
				align-items: center;
				justify-content: center;
				width: 230upx;
				height: 100%;
				font-size: 28upx;
				padding: 0;
				border-radius: 0;
				background: transparent;
			}
		}
	}
	.alert {
		z-index: 198;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		background: rgba(0, 0, 0, 0.4);
		.main {
			z-index: 199;
			position: relative;
			flex-direction: column;
			align-items: center;
			padding: 30upx 10upx;
			border-radius: 12upx;
			width: 90%;
			max-height: 80%;
			background: #ffffff;
			.icon {
				position: absolute;
				left: calc(50% - 60upx);
				top: -60upx;
				font-size: 100upx;
				background: #ffffff;
				color: $uni-color-primary;
				border-radius: 70upx;
				padding: 20upx;
			}
		}
	}
</style>
